<template>

  <van-tabs v-model:active="active" @click-tab="onClickTab" shrink>

    <van-tab v-for="(item, index) in formattedShowDates" :key="index"> <!--  日期筛选  -->
      <template #title>
        {{ item }}
      </template>

      <template #default>

        <!--  地域  排序  品牌  和其他筛选条件  需要传入 日期筛选 -->
        <DropDownCmp :activeShowDate="activeShowDate" />

        <!---  影院列表 -->
        <ul>
          <li class="cinema-item" v-for="cinema in cinemas" :key="cinema.cinemaId" @click="onClickCinema(cinema)">
            <div class="container">
              <div class="cinema-title-price">
                <div class="cinema-title"> {{ cinema.nm }}</div>
                <div class="price"></div>
              </div>
              <div class="cinema-addr-distance">
                {{ cinema.addr }}
              </div>
              <div class="services">
                <van-tag plain v-for="(feature, index) in cinema.featureTags" :key="index">{{
                  feature.tag }}</van-tag>
              </div>

            </div>
          </li>
        </ul>

      </template>
    </van-tab>

  </van-tabs>


</template>


<script setup>
import DropDownCmp from "@/components/buy_ticket/DropDownCmp.vue"
import { fetchCinemaDetail } from "@/api/index.js"
import { ref, computed, watch, onMounted } from 'vue'
import { formatDates } from "@/tools/index.js"

const active = ref(0)

const loading = ref(true)


const props = defineProps({
  showDates: {
    type: Array,
    default: () => []
  }
});

const showDates = computed(() => { // 获取所有日期
  return props.showDates
})

const activeShowDate = computed(() => { // 获取当前选中的日期
  return showDates.value[active.value]
})



// 使用计算属性来格式化日期
const formattedShowDates = computed(() => {
  return formatDates(showDates.value);
});


onMounted(async () => {

})












const onClickTab = ({ name }) => {
  //切换了日期
  console.log("切换了日期", name)

};


const onClickCinema = (cinema) => {

  console.log("onClickCinema", cinema);

};


</script>


<style scoped>
ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;

}


.cinema-item {
  cursor: pointer;
  background-color: #fff;
  padding: 10px;

}

.container {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.cinema-title-price {
  display: flex;
  justify-content: flex-start;
  align-items: center;

}
</style>
